<%--
  Created by IntelliJ IDEA.
  User: yuliang
  Date: 2016/11/28
  Time: 15:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String address = request.getParameter("address");
    String location = request.getParameter("location");
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-8 col-sm-8">
            <input type="text" class="form-control" name="address" id="address" value="<%=address%>"/>
        </div>
        <div class="col-lg-4 col-sm-4">
            <label id="local" class="form-control"></label>
        </div>
    </div>

    <div id="container" style="width:100%; height:350px"></div>
    <ul id="path" class="list-group">

    </ul>
</div>
</body>
<script>

    var geocoder = null;
    var geocoderAddress = null;

    function initList(result) {
        var firstItem = result.detail.nearPois[0];
        $("#address").val(firstItem.address + firstItem.name);

        var local = $("#local");
        local.text(firstItem.latLng.lat + "," + firstItem.latLng.lng);

        var ul = $("#path");
        ul.empty();
        for (var i = 0; i < result.detail.nearPois.length; i++) {
            var item = result.detail.nearPois[i];
            var lat = item.latLng.lat;
            var lng = item.latLng.lng;
            var a = '<a href="##" data-location="' + lat + ',' + lng + '" data-address="' + item.address + item.name + '"  class="list-group-item">' +
                    '        <h4 class="list-group-item-heading">' + item.name + '</h4>' +
                    '        <p class="list-group-item-text">' + item.address + '</p>' +
                    '</a>';

            ul.append(a);
        }
    }

    var map = null;

    var marker = null;

    var initMarker = function (position) {
        marker = new qq.maps.Marker({
            position: position,
            map: map
        });
        marker.setDraggable(true);
        qq.maps.event.addListener(marker, 'dragend', function (event) {
            geocoder.getAddress(event.latLng);
        });
    }

    function init() {
        var hasCenter = '<%=location%>';

        var center = new qq.maps.LatLng(39.914850, 116.403765);
        if(hasCenter!='null'){
            center = new qq.maps.LatLng(hasCenter.split(",")[0],hasCenter.split(",")[1]);
        }

        map = new qq.maps.Map(document.getElementById("container"), {
            // 地图的中心地理坐标。
            center: center,
            zoom: 16
        });

        //获取城市列表接口设置中心点
        citylocation = new qq.maps.CityService({
            complete: function (result) {
                map.setCenter(result.detail.latLng);
                initMarker(result.detail.latLng);
                geocoder.getAddress(result.detail.latLng);
            }
        });

        var scaleControl = new qq.maps.ScaleControl({
            align: qq.maps.ALIGN.BOTTOM_RIGHT,
            margin: qq.maps.Size(85, 15),
            map: map
        });


        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                initList(result);
            }
        });

        geocoderAddress = new qq.maps.Geocoder({
            complete: function (result) {
                map.panTo(result.detail.location);
                marker.setMap(null);
                initMarker(result.detail.location);
                geocoder.getAddress(result.detail.location);
            }
        });

        if(hasCenter=='null'){
            //调用searchLocalCity();方法    根据用户IP查询城市信息。
            citylocation.searchLocalCity();
        }else{
            var lc = new qq.maps.LatLng(hasCenter.split(",")[0],hasCenter.split(",")[1]);
            initMarker(lc);
            geocoder.getAddress(lc);
        }
    }


    function search() {
        var address = $("#address").val();
        geocoderAddress.getLocation(address);
    }

    $(document).on("click", ".list-group-item", function () {
        var locals = $(this).attr("data-location");
        var center = new qq.maps.LatLng(locals.split(",")[0], locals.split(",")[1]);
        map.panTo(center);
        marker.setMap(null);
        initMarker(center);


        var address = $(this).attr("data-address");
        $("#address").val(address);

        var local = $("#local");
        local.text(locals);

    });

    $(document).on("keydown", "#address", function (event) {
        if (event.keyCode == 13) {
            search();
        }
    });

    init();

</script>
</html>
